<template>
  <view class="article">
    <view class="title">{{ title }}</view>
    <view class="time">{{ time }}</view>
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
import { getArticleDetails } from '@/api/join';

export default {
  data() {
    return {
      id: '',
      title: '',
      time: '',
      content: ''
    };
  },

  onLoad(opts) {
    this.init(opts.id);
  },

  methods: {
    async init(id) {
      const res = await getArticleDetails(id);

      uni.setNavigationBarTitle({
        title: res.data.title
      });
      this.title = res.data.title;
      this.time = res.data.createddate;
      this.content = res.data.content;
    }
  }
};
</script>

<style lang="scss">
page {
  background: #ffffff;
}
.article {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  margin: auto 24rpx;
  overflow: scroll;
  .title {
    font-size: 36rpx;
    margin: 20rpx 0;
    font-weight: bold;
  }
  .time {
    font-size: 24rpx;
    margin: 16rpx 0;
    color: #b1b1b1;
  }
}
</style>
